<!DOCTYPE html>
<html>
<head>
	<title>three.js webgl</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
	body {
		margin: 0;
		overflow: hidden;
		background-color: #ccc;
		color: #000;
	}
	a {
		color: #f00;
	}
	div#canvas-frame {
        border: none;
        cursor: pointer;
        width: 100%;
        height: 600px;
        background-color: #EEEEEE;
    }
	</style>
</head>
<body>
<div id="canvas-frame"></div>
<script type="importmap">
{
	"imports": {
		"three": "./js/threejs/three.module.js",
		"three/addons/": "./js/threejs/jsm/"
	}
}
</script>
<script type="module">
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
let camera,controls, scene, renderer, stats;
initScene();
createMesh(scene);
createAxes(scene);
render();
rotation();

function initScene(){
	//创建场景对象Scene
	scene = new THREE.Scene();
	//创建相机对象
	var wWidth = window.innerWidth;
	var wHeight= window.innerHeight;
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera( 75, wWidth/wHeight, 0.1, 1000 );
	//创建渲染器对象
	//创建渲染器对象(渲染要等所有东西都加进去再渲染场景，创建和3D模型和光源没有先后顺序)
	//antialias: true, // 是否开启反锯齿，设置为true开启反锯齿，可以提升画质
	renderer = new THREE.WebGLRenderer({antialias: true});
	//设置渲染区域尺寸(设置的是整个屏幕的长度和宽度
	
	//body元素中插入canvas对象，也可以在页面中添加div，并加上id，通过id指定在某个div中渲染
	var hCanvas = document.getElementById("canvas-frame");
	if(null==hCanvas){
		document.body.appendChild( renderer.domElement );
		renderer.setSize( wWidth, wHeight);
	}else{
		var width  = hCanvas.clientWidth;
		var height = hCanvas.clientHeight;
		renderer.setSize( width, height);
		hCanvas.appendChild(renderer.domElement); // 将画布添加到页面上
	}
}

function createAxes(hScene){
	var axes = new THREE.AxesHelper();
	hScene.add(axes)
}
function createMesh(hScene){
	//创建一个立方体几何对象Geometry
	const geometry = new THREE.BoxGeometry(2, 2, 2 );
	//给几何体创建材质，这里是改为蓝色，材质对象Material
	const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
	//网格模型对象Mesh
	const cube = new THREE.Mesh( geometry, material );
	//网格模型添加到场景中，每个模型最终都要添加到场景中才会被渲染
	cube.name = 'box'
	hScene.add( cube );
	cube.rotation.x += 0.5;
	cube.rotation.y += 0.5;
}
function rotation(){
	camera.position.z = 5;
	
}
//循环渲染
function render() {
	//执行渲染操作   指定场景、相机作为参数
	renderer.render(scene, camera);
	// 使用 requestAnimationFrame 函数安排下一次渲染
	requestAnimationFrame(render);
	//修改正方体网格的x轴旋转角度
	//mesh.rotation.x += 0.02
}


</script>
</body>
</html>
